<!DOCTYPE html>
<html lang="zh">
<style>
  .text-blue-600 {
    color: #2563eb;
  }
  .text-green-600 {
    color: #16a34a;
  }
</style>
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>义务教育报告生成平台</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<body class="bg-gray-100 min-h-screen">

  <!-- 主容器 -->
  <div class="flex flex-col md:flex-row h-screen">

    <!-- 左侧 ChatGPT 对话主体 -->
    <main class="flex-1 flex flex-col p-6 bg-white shadow-inner overflow-hidden">
      <h2 class="text-2xl font-bold text-indigo-700 mb-4">义务教育智能问答助手</h2>

      <!-- 聊天记录 -->
      <div id="chatBox" class="flex-1 overflow-y-auto space-y-4 pr-2">
        <!-- 消息将插入这里 -->
      </div>

      <!-- 聊天输入 -->
      <form id="imageChatForm" class="mt-4 flex flex-col sm:flex-row gap-4 items-center">
        <input type="file" id="imageFile" accept="image/*"
               class="w-full sm:w-auto border border-gray-300 rounded-lg file:bg-pink-500 file:text-white file:px-3 file:py-1 hover:file:bg-pink-600"/>
        <input type="text" id="imageQuestion" placeholder="请提出您的问题..." required
               class="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500" />
        <button type="submit"
                class="bg-indigo-600 text-white px-6 py-2 rounded-lg hover:bg-indigo-700 transition">
          发送
        </button>
      </form>
    </main>

    <!-- 右侧报告上传区 -->
    <aside class="w-full md:w-80 bg-gray-50 border-l border-gray-200 p-6 flex flex-col justify-between">
      <div>
        <h3 class="text-lg font-semibold text-gray-800 mb-2">义务教育报告生成</h3>
        <p class="text-sm text-gray-500 mb-4">上传 Word 模板和 Excel 学生数据生成智能报告。</p>

        <form id="uploadForm" class="space-y-4">
          <input type="file" id="docFile" accept=".doc,.docx"
                 class="block w-full text-sm border border-gray-300 rounded-lg file:bg-indigo-500 file:text-white file:px-3 file:py-1 hover:file:bg-indigo-600" required />
          <input type="file" id="excelFile" accept=".xls,.xlsx"
                 class="block w-full text-sm border border-gray-300 rounded-lg file:bg-green-500 file:text-white file:px-3 file:py-1 hover:file:bg-green-600" required />
          <button type="submit"
                  class="w-full bg-indigo-600 text-white py-2 rounded-lg hover:bg-indigo-700 transition">
            生成报告
          </button>
        </form>

        <div id="reportStatus" class="mt-4 hidden text-sm text-center">
          <p class="text-green-600 font-medium">报告已生成：</p>
          <a id="downloadLink" href="#" class="text-blue-600 underline hover:text-blue-800" download>点击下载报告</a>
        </div>
      </div>

      <p class="text-xs text-gray-400 mt-8 text-center">© 义务教育报告生成平台</p>
    </aside>
  </div>

  <!-- 功能逻辑 -->
  {% load static %}
  <script src="{%  static 'script/main.js' %}"></script>
</body>
</html>
